<template>
  <x-popup position="center" :show="show" :closeIcon="false" @update:show="onClose">
    <view class="about-pop-view">
      <view class="content-view">
        <!-- 动态展示公司信息 -->
        <view v-for="(value, key) in aboutModal" :key="key" class="item-cell">
          <view class="lable-name">{{ labelMapping[key] }}</view>
          <view class="lable-value">{{ value }}</view>
        </view>
      </view>
    </view>
  </x-popup>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// 定义 props
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  aboutModal: {
    type: Object,
  }
});

// 定义 emits
const emit = defineEmits(['update:show']);

// 标签映射
const labelMapping = {
  companyName: '公司名称',
  version: '版本号',
  telphone: '电话',
  pubSecNumber: '公安备案号',
  subjectNumber: '主体备案号'
};

// 关闭弹窗时触发的事件
const onClose = (event) => {
  emit('update:show', event);
};
</script>

<style scoped lang="less">
.about-pop-view {
	    width: 632rpx;
	    height: 500rpx;
	    overflow: hidden;
	}
	
	.content-view {
	    margin: 0 40rpx;
	}
	
	.item-cell {
	    display: flex;
	    flex-direction: row;
	}
	
	.lable-name {
	    width: 168rpx;
	    height: 100rpx;
	    font-family: PingFang SC;
	    font-weight: 500;
	    font-size: 28rpx;
	    color: #666666;
	    line-height: 100rpx;
	    text-align: left;
	    margin-right: 20rpx;
	}
	
	.lable-value {
	    width: 430rpx;
	    height: 100rpx;
	    font-family: PingFang SC;
	    font-weight: 500;
	    font-size: 28rpx;
	    color: #212121;
	    line-height: 100rpx;
	    text-align: right;
	}
	::v-deep .popup-content {
	   padding: 0;
	}
</style>
